<template>
    <div class="addres_props">
        <van-popup
            v-model="cascaderCity"
            round
            position="bottom"
            @close="cascaderclose"
        >
            <van-cascader
                v-model="cascaderValue"
                title="请选择所在地区"
                :options="options"
                @close="cascaderclose"
                @change="cascadeChange"
                @finish="cascadeFinish"
            />
        </van-popup>
    </div>
</template>

<script>
import { axiosPost } from '../axios';
// import { Toast } from 'vant';
export default {
    name: '',
    props: [''],
    data() {
        return {
            cascaderCity: false,
            options: [],
            cascaderValue: '',
        };
    },
    computed: {},
    mounted() {
        this.initCity();
    },
    methods: {
        // 关闭
        cascaderclose() {
            this.cascaderCity = false;
            this.$emit('closeAddresProps', false);
        },
        // 级联多选点击确定
        cascadeFinish({ selectedOptions }) {
            this.cascaderCity = false;
            this.$emit('checkAddresData', selectedOptions);
        },
        // 级联多选发生变化
        cascadeChange({ selectedOptions, value }) {
            // console.log(value);
            // console.log(selectedOptions);
            axiosPost(
                '/api/index/region',
                {
                    parent_id: value,
                    level: selectedOptions.length + 1,
                },
                (res) => {
                    switch (selectedOptions.length + 1) {
                        case 2:
                            this.options[selectedOptions[0].index].children =
                                res.data.map((item, index) => {
                                    return {
                                        index: index,
                                        lastIndex: index,
                                        text: item.name,
                                        value: item.id,
                                        level: item.level,
                                        children: [],
                                    };
                                });
                            break;
                        case 3:
                            this.options[selectedOptions[0].index].children[
                                selectedOptions[1].index
                            ].children = res.data.map((item, index) => {
                                return {
                                    index: index,
                                    lastIndex: index,
                                    text: item.name,
                                    value: item.id,
                                    level: item.level,
                                };
                            });
                            break;

                        default:
                            break;
                    }
                }
            );
        },
        // 打开省市县级联选择
        initCity() {
            this.cascaderCity = true;
            axiosPost(
                '/api/index/region',
                {
                    parent_id: 0,
                    level: 1,
                },
                (res) => {
                    // console.log(res);
                    this.options = res.data.map((item, index) => {
                        return {
                            index: index,
                            text: item.name,
                            value: item.id,
                            level: item.level,
                            children: [],
                        };
                    });
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.addres_props {
    .s-list {
        padding: 0 0.64rem;
    }
    .qs-btn {
        padding: 0.1rem 0.5rem;
        border: 1px solid #fd8000;
        color: #fd8000;
        margin: 0;
    }
    .s-list-cell {
        display: inline-block;
        position: relative;
        height: 1.28rem;
        line-height: 1.28rem;
        margin-bottom: 0.32rem;
        text-align: center;
        margin-right: 0.4267rem;
        padding: 0 0.32rem;
        padding-right: 1.0667rem;
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: #666;
        border-radius: 0.1707rem;
    }
    .s-list-cell:after {
        content: '\2715';
        position: absolute;
        top: 0;
        right: 0.2133rem;
        font-weight: 100;
    }
    .van-cascader__header {
        height: 2rem;
        padding: 0 0.64rem;
    }

    .van-cascader__tabs .van-tabs__nav--complete {
        padding: 0 0.64rem;
    }

    .van-cascader__tabs.van-tabs--line .van-tabs__wrap {
        height: 1.024rem;
    }

    .van-cascader__title {
        font-size: 0.68267rem;
        color: #969799;
    }
    .van-popup--bottom.van-popup--round {
        border-radius: 0;
    }

    .van-cascader__tabs .van-tab {
        font-size: 0.68267rem;
        padding: 0;
        margin-right: 0.4267rem;
    }

    .van-tabs__line {
        position: absolute;
        bottom: 0px;
        left: 0;
        z-index: 1;
        width: 2rem;
        height: 3px;
        background-color: #ee0a24;
        border-radius: 3px;
    }

    .van-cascader__options {
        box-sizing: border-box;
        height: 12rem;
        padding-top: 6px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 0.64rem;
        margin-top: 0.4267rem;
    }

    .van-cascader__options {
        padding-bottom: 0.5rem;
    }
    .van-cascader__option {
        font-size: 0.4693rem;
        float: none;
        width: 100%;
        text-align: center;
        font-size: 0.68267rem;
        line-height: 1.3rem;
        padding: 0;
        width: 50%;
        float: left;
    }

    .van-cascader__close-icon {
        color: #c8c9cc;
        font-size: 0.8533rem;
    }
}
</style>
